<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!doctype html>
<html>
<head>
    <%@ include file="/common/common.jsp" %>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>枝芽云收款平台 - 网上支付 安全快速！</title>
        <link charset="utf-8" rel="stylesheet" href="${ctx }/alipayImage/front-old.css" media="all">
        <link charset="utf-8" rel="stylesheet" href="${ctx }/alipayImage/payView.css" media="all">

<body style="min-width: 990px;">
<div class="topbar">
    <div class="topbar-wrap fn-clear">
        <!--<a href="" class="topbar-link-last">常见问题</a>-->
        <span class="topbar-link-first">你好，欢迎使用枝芽云收款平台付款！</span>
    </div>
</div>

<div id="header">
    <div class="header-container fn-clear">
        <div class="header-title">
            <div class="alipay-logo"><img src="${ctx }/alipayImage/zypay.png" width="120px" height="40px"></div>
            <span class="logo-title">我的收银台</span>
        </div>
    </div>
</div>

<div id="container">
    <div class="mi-notice mi-notice-success mi-notice-titleonly order-timeout-notice">
        <div class="mi-notice-cnt">
            <div class="mi-notice-title">
                <i class="iconfont" title="支付成功">&#61513;</i>
                <h3>支付成功，<span class="ft-orange">3</span> 秒后自动返回商户。</h3>
            </div>
        </div>
    </div>

    <div class="mi-notice mi-notice-error mi-notice-titleonly order-timeout-notice">
        <div class="mi-notice-cnt">
            <div class="mi-notice-title">
                <i class="iconfont" title="交易超时">&#61509;</i>
                <h3>抱歉，您的交易因超时已失败。</h3>
                <p class="mi-notice-explain-other">
                    您订单的最晚付款时间为： <span id="J_orderDeadline"></span>，目前已过期，交易关闭。
                </p>
            </div>
        </div>
    </div>

    <!-- 页面主体 -->
    <div id="content" class="fn-clear">
        <div id="J_order" class="order-area">
            <div id="order" class="order order-bow">
                <div class="orderDetail-base">
                    <div class="order-extand-explain fn-clear">
		        <span class="fn-left explain-trigger-area order-type-navigator" style="cursor: auto">
			        <span>正在使用枝芽云收款平台交易</span>
		        </span>
                        <span class="fn-left create-time" id="teDelay">
		        <span>交易将在<span id="teOrderDelayText">59分钟</span>后关闭，请及时付款！</span>
		        </span>
                    </div>
                    <div class="commodity-message-row">
		        <span class="first long-content">
		            	 ${payremark}-${sponsorOrderNo}
		        </span>
                        <span class="second long-content">
		           	收款方：${shopName}
		        </span>
                    </div>
                    <span class="payAmount-area">
	        	<strong class=" amount-font-22 ">${payMoney}</strong> 元
	    	</span>
                </div>

            </div>
        </div>

        <!-- 操作区 -->
        <div class="cashier-center-container">
            <div class="cashiser-switch-wrapper fn-clear">
                <!-- 扫码支付页面 -->
                <div class="cashier-center-view view-qrcode fn-left" id="J_view_qr">
                    <!-- 扫码区域 -->
                    <div class="qrcode-integration qrcode-area" id="J_qrPayArea">
                        <div class="qrcode-header">
                            <input type="hidden" value="${callback_url}">
                            <div class="ft-center">扫一扫付款（元）</div>
                            <div class="ft-center qrcode-header-money">${payMoney}</div>
                        </div>
                        <div class="qrcode-img-wrapper">
                            <div data-role="qrPayImg" class="qrcode-img-area">
                                <div class="ui-loading qrcode-loading"
                                     style="display: none;">
                                </div>
                                <div style="position: relative;display: inline-block;">
                                    <img src="${ctx}/auth/lookPayUrl?payId=${payId}&sign=${sign}" width="168" height="168"
                                         style="float: left;">


                                </div>
                            </div>
                            <div class="qrcode-img-explain fn-clear">
                                <img class="fn-left" src="${ctx }/alipayImage/T1bdtfXfdiXXXXXXXX.png" alt="扫一扫标识" >
                                <div class="fn-left">打开手机支付宝或微信<br>扫一扫继续付款</div>
                            </div>
                        </div>

                    </div>


                    <%--<!-- 指引区域 -->
                    <div class="qrguide-area" id="J_qrguideArea">
                        <img id="qrguideAreaImg1" onclick="changeImg(1)" src="../alipayImage/T13CpgXf8mXXXXXXXX.png"
                             class="qrguide-area-img background" >
                        <img id="qrguideAreaImg2" onclick="changeImg(2)" src="../alipayImage/T1ASFgXdtnXXXXXXXX.png"
                        class="qrguide-area-img active" style="display: block;">
                    </div>
                    <script type="text/javascript" src="../statics/libs/jquery.min.js"></script>
                    <script type="text/javascript">
                        function changeImg(type) {
                            if (type == 2) {
                                $('#qrguideAreaImg2').removeClass("active");
                                $('#qrguideAreaImg1').addClass("active");
                            } else if (type == 1) {
                                $('#qrguideAreaImg1').removeClass("active");
                                $('#qrguideAreaImg2').addClass("active");
                            }
                        }
                    </script>--%>
                </div>


                <!-- 点击切换区域 -->
                <div class="view-switch qrcode-show fn-left" id="J_viewSwitcher" onselectstart="return false;"
                     style="padding-right: 10px; margin-left: -10px;">
                    <div class="switch-tip switch-qrcode-tip " id="J_tip_qr">
                        <div class="switch-tip-font">&nbsp;</div>
                        <div class="switch-tip-icon-wrapper">
                            <i class="switch-tip-icon iconfont" title="显示器">&#61486;</i>
                            <img class="switch-tip-icon-img" src="${ctx }/alipayImage/ali.png" alt="支付宝图标"
                                 width="50" height="17">
                        </div>
                    </div>
                    <div class="switch-tip switch-qrcode-tip " id="J_tip_wx">
                        <div class="switch-tip-icon-wrapper">
                            <i class="switch-tip-icon iconfont" title="显示器">&#61486;</i>
                            <img class="switch-tip-icon-img" src="${ctx }/alipayImage/weixi1.png" alt="微信图标"
                                 width="50" height="17" >
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div id="footer">
        <div class="copyright">
            <input type="hidden" id="callbackUrl" value="${callback_url}">
            <input type="hidden" id="sponsorOrderNo" value="${sponsorOrderNo}"><!--订单号-->
            <input type="hidden" id="payId" value="${payId}"><!--订单号-->
            <a href="javascript:;" target="_blank"
               smartracker="on">备案号：湘ICP备17012799</a>
        </div>
    </div>
    <div id="partner"><!--<img alt="合作机构" src="">--></div>
</div>
<script>
    function findOrderStart() {
        var data = {
            payId: $("#payId").val(),//$("#payId").val()
        };
        $.ajax({
            type: "POST",
            url: "${ctx }/auth/findOrderStart",
            data: data,
            dataType: 'json',
            success: function (result) {
                console.log("=====:"+result.code);
                if (result.code == 0) {
                    console.log("===******==:"+result.status);
                    if(result.status==2) {
                        window.location.href = $("#callbackUrl").val();
                    }
                }
            }
        });
    }
    setInterval("findOrderStart()","5000");
</script>
</body>
</html>